<template>
	<view class="bg-white p-24 radius-16 flex">
		<image
			src="https://oiz.zhijingyou.com/upload/2024/lvapps/1726650540-532718099638976.jpg"
			class="icon-208 radius-16"
			mode="aspectFill"
		/>
		<view class="ml-20 flex-1 pos-rel">
			<view class="text-2-ellipsis fs-28 font-bold">恩施大峡谷+腾龙洞景区+东湖磨山景区+武汉大学武汉武汉大学</view>
			<view class="flex-a mt-8">
				<image :src="imgBaseUrl + 'icon-loc.png'" class="icon-28" />
				<text class="c-grey-86 ml-4">西岛海洋文化旅游区</text>
			</view>
			<view class="promotion-price">
				<view class="c-grey-86">
					<view>销售价</view>
					<view class="c-red font-bold fs-26">¥92起</view>
				</view>
				<view class="bd-left">
					<view>推广奖励</view>
					<view class="c-red font-bold fs-26">2%(¥20)</view>
				</view>
				<view v-if="type == 'promotion'" class="promotion-btn">去推广</view>
				<view v-else-if="type == 'collection'" class="check-box">
					<image :src="imgBaseUrl + 'icon-check.png'" class="icon-48" />
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
defineProps({
	data: Object,
	type: String, //页面类型 promotion->推广 collection->合集编辑
})
const imgBaseUrl = inject("imgBaseUrl")
</script>
<style lang="scss" scoped>
.promotion-price {
	position: absolute;
	left: 0;
	bottom: 0;
	right: -24rpx;
	color: $c-grey-86;
	padding: 6rpx 16rpx;
	background: linear-gradient(90deg, rgba(254, 224, 56, 0.1) 2%, rgba(254, 224, 56, 0) 99%);
	border-radius: 16rpx;
	display: flex;
	.bd-left {
		padding-left: 76rpx;
		position: relative;
		&::before {
			content: "";
			position: absolute;
			left: 48rpx;
			top: 8rpx;
			bottom: 8rpx;
			width: 1rpx;
			background: #e5e6eb;
		}
	}
	.promotion-btn {
		position: absolute;
		top: 16rpx;
		bottom: 16rpx;
		right: 0;
		padding: 0 18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		color: $c-black-1d;
		background: #fee038;
		border-radius: 44rpx 0 0 44rpx;
	}
	.check-box {
		font-size: 0;
		position: absolute;
		right: 24rpx;
	}
}
</style>
